<template>
  <el-cascader
    v-model="value"
    @change="confirm"
    :props="props"
    clearable
    :options="cityList"
    filterable
  ></el-cascader>
</template>

<script>
import { getAllCity, getCounty } from '@/api/after-sale/common/common'
export default {
  data() {
    return {
      value: '',
      cityList: [{ cityCode: '', cityName: '' }],
      props: {
        lazy: true,
        value: 'cityCode',
        label: 'cityName',
        lazyLoad(node, resolve) {
          if (node.data.cityCode) {
            getCounty(node.data.cityCode).then((res) => {
              const { data } = res
              let nodes = data.map((e) => {
                return (e = {
                  cityCode: e.countyCode,
                  cityName: e.countyName,
                  leaf: true,
                })
              })
              resolve(nodes)
            })
          }
        },
      },
    }
  },
  methods: {
    confirm() {
      this.$emit('cityValue', this.value)
    },
    // 搜索
    filter(node, keyword) {
      console.log(node);
    }
  },
  async mounted() {
    const { data } = await getAllCity()
    this.cityList = data
  },
}
</script>